<%@page import="com.skeleton.db.dto.ShowinfoDto"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Insert title here</title>
	<script type="text/javascript" src="<%=request.getContextPath() %>/resource/jquery-1.8.2.js"></script>
	<style type="text/css">
		body {
			margin: 0px;
			padding: 0px;
			font-family: 微软雅黑;
		}
		
		.fl {
			float: left;
		}
		
		.menu {
			border-right: 1px dotted black;
			height: 600px;
		}
		
		.center {
			margin-left: 30px;
		}
		
		.div1 {
			margin-top: 30px;
			padding: 10px 20px 10px 20px;
			border: 1px solid red;
			font-size: 20px;
		}
		
		.div2 {
			margin-top: 30px;
			height: 49px;
		}
		
		.jiantou {
			background-image: url("<%=request.getContextPath() %>/resource/img1.jpg");
			width: 30px;
			height: 20px;
			margin-top: 13px;
			float: left;
		}
		
		.jianshen {
			background-image: url("<%=request.getContextPath() %>/resource/img2.jpg");
			width: 50px;
			height: 20px;
			margin-top: 13px;
		}
		
		.item {
			float: left;
			display: block;
			padding: 0;
			list-style: none;
			background: #fff;
			margin: 7px 0 7px 7px;
			box-shadow: 0 0 1px #fff;
			-moz-box-shadow: 0 0 1px #fff;
			-webkit-box-shadow: 0 0 1px #fff;
			-moz-border-radius: 3px;
			-webkit-border-radius: 3px;
			display: block;
			padding: 0;
			list-style: none;
			min-width: 150px;
		}
		
		.item a {
			border: solid 1px transparent;
			display: block;
			padding: 3px;
			margin: 3px;
			color: #4b4b4b;
			text-decoration: none;
		}
		
		.item a:hover {
			border: solid 1px #7da2ce;
			-moz-border-radius: 3px;
			-webkit-border-radius: 3px;
			box-shadow: inset 0 0 1px #fff;
			-moz-box-shadow: inset 0 0 1px #fff;
			-webkit-box-shadow: inset 0 0 1px #fff;
			background-color: #cfe3fd;
			background: -moz-linear-gradient(top, #dcebfd, #c2dcfd);
			background: -webkit-gradient(linear, center top, center bottom, from(#dcebfd), to(#c2dcfd) );
		}
	</style>
	<script type="text/javascript">
		$(function() {
// 			$("li").click(function() {
// 				$("li ul").hide();
// 				$(this).children("ul").show(); 
// 			});
		});
	</script> 
</head>
<body>
	<h1>展示</h1> 
	<hr />
	<h2>目录1 目录2</h2>
	<div>
		<div class="menu fl">
			 <ul class="item">
			 	<%
			 		List<ShowinfoDto> list = (List<ShowinfoDto>)request.getAttribute("list");
			 		for(int i=0; i<list.size(); i++) {
			 			ShowinfoDto dto = list.get(i);
			 			if(dto.getShowId().length() == 2) {
			 	%>
		            <li>
		            	<a href="#"><%=dto.getShowTitle() %></a>
		            	<ul class="display" style="list-style: none;">
		            		<%
		            			for(int j=0; j<list.size(); j++) {
		    			 			ShowinfoDto dto2 = list.get(j);
		    			 			if(dto2.getShowId().length()==4 && dto.getShowId().equals(dto2.getShowId().substring(0, 2))) {
		            		%>
								<li><a href="<%=request.getContextPath() %>/show/index?id=<%=dto2.getShowId() %>"><%=dto2.getShowTitle() %></a></li>
		            		<%	
		    			 			}
		            			}
		            		%>
				        </ul> 
		            </li>
			 	<%
			 			}
			 		}
			 	%>
	        </ul> 
		</div>
		<div class="center fl">
			<%
				List<ShowinfoDto> list2 = (List<ShowinfoDto>)request.getAttribute("list2");
				if(list2 != null) {
					for(int i=0; i<list2.size(); i++) {
						ShowinfoDto dto = list2.get(i);
			%>
					<div class="div1 fl">
						<%=dto.getShowTitle() %>
					</div> 
					<%
						if(i != list2.size()-1) {
					%>
					<div class="div2 fl">
					<div class="fl" style="width: 5px; height: 20px;"></div>
					<div class="jianshen fl"></div>
					<div class="jiantou fl"></div>
					</div>
			<%			}
					}
				}
			%>
		</div>
	</div>
</body>
</html>